<template>
  <main-card-admin :title="title" :loading="loading" :crumbs="crumbs" :show-screen-space="false">
    <template #tool-btn v-if="detailData">
      <div v-if="detailData?.status == 0" class="tool-btn">
        <p>
          <i class="iconfont icon-information-fill"></i>
          该算法服务将于{{ detailData?.statusTime || '' }}删除
        </p>
      </div>
      <div v-else class="tool-btn">
        <a-button v-auth="'algo-service-delete'" type="default" class="icon-with-btn" @click.stop="handleOpenDeleteModal()">
          <i class="iconfont icon-delete-bin-line"></i>
          <span class="text">删除算法</span>
        </a-button>
        <a-button v-auth="'algo-service-edit'" type="default" class="icon-with-btn" @click.stop="handleToGloForm()">
          <i class="iconfont icon-edit-line"></i>
          <span class="text">编辑算法</span>
        </a-button>
        <a-button v-auth="'algo-version-add'" type="primary" class="icon-with-btn" @click.stop="handleToVersionForm('add', {})">
          <i class="iconfont icon-upload-line"></i>
          <span class="text">上传版本</span>
        </a-button>
      </div>
    </template>
    <template #default>
      <div class="topTome">
        <div class="topTome-time">
          <div class="timeBox">
            <span>创建时间</span>
            <span class="time">{{ detailData?.createTime || '' }}</span>
          </div>
          <div class="timeBox">
            <span>更新时间</span>
            <span class="time">{{ detailData?.updateTime || '' }}</span>
          </div>
        </div>
      </div>
      <div class="service-detail">
        <div class="service-detail-title">
          <div class="pageTitle">算法详情</div>
          <div class="service-detail-title-right">
            <a-button type="text" target="_blank" :href="`/algorithm-center/detail/${detailData?.id}`">跳转</a-button>
          </div>
        </div>
        <div class="content">
          <div class="baseInfo">
            <div class="left flexItem">
              <div class="infoItem">
                <div class="title">名称*</div>
                <div class="value">{{ detailData?.algorithmName || '' }}</div>
              </div>
              <div class="infoItem">
                <div class="title">服务类型</div>
                <div class="tagList">
                  <div v-for="(item, index) in detailData?.typeAndNames" :key="index" class="tag typeTag" color="#4686ed">
                    <a-tooltip placement="topLeft">
                      <template #title>
                        <span>{{ item.name }}</span>
                      </template>
                      {{ item.name }}
                    </a-tooltip>
                  </div>
                  <div v-if="!detailData?.typeAndNames.length">无</div>
                </div>
              </div>
              <div class="infoItem">
                <div class="title">服务标签</div>
                <div class="tagList">
                  <div v-for="(item, index) in detailData?.labelAndNames" :key="index" class="tag personalizedTag" color="#4686ed">
                    <a-tooltip placement="topLeft">
                      <template #title>
                        <span>{{ item.name }}</span>
                      </template>
                      {{ item.name }}
                    </a-tooltip>
                  </div>
                  <div v-if="!detailData?.labelAndNames.length">无</div>
                </div>
              </div>
              <div class="infoItem">
                <div class="title">功能演示</div>
                <div class="value">
                  <a
                    v-if="detailData?.functionDemo"
                    target="_blank"
                    class="link"
                    :href="detailData?.functionDemo"
                    :title="detailData?.functionDemo"
                    >{{ detailData?.functionDemo ? detailData?.functionDemo : '无' }}</a
                  >
                  <div v-else>无</div>
                </div>
              </div>
            </div>
            <div class="right flexItem">
              <div class="infoItem">
                <div class="title">预览图*</div>
                <div class="value">
                  <img class="previewImg" :src="detailData?.downloadImageUrl" />
                </div>
              </div>
              <div class="infoItem intro">
                <div class="title">简介*</div>
                <div class="value">
                  <p>
                    {{ detailData?.algorithmDescribe || '' }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="otherInfo">
            <div :class="['introduce', showOtherInfo && 'show']">
              <span class="showDownBtn" @click="showOtherInfo = !showOtherInfo">
                <i v-if="!showOtherInfo" class="iconfont icon-arrow-right-s-fill"></i>
                <i v-else class="iconfont icon-arrow-down-s-fill"></i>
              </span>
              <span class="mr-12">功能介绍、适用场景</span>
              <span class="line"></span>
            </div>
            <div v-if="showOtherInfo" class="content">
              <div class="content-box">
                <div class="title">功能介绍*</div>
                <div class="content-box-info">
                  <div v-for="item in detailData?.algorithmFunctionIntroductionVOList" :key="item.id" class="content-box-info-list">
                    <div class="name">{{ item?.functionTag || '' }}</div>
                    <div class="describe">{{ item?.functionContent || '' }}</div>
                  </div>
                </div>
              </div>
              <div class="content-box">
                <div class="title">适用场景*</div>
                <div class="content-box-info">
                  <div
                    v-for="item in detailData?.algorithmApplicableScenarioVOList"
                    :key="item.id"
                    class="content-box-info-list flex-space-between"
                  >
                    <div>
                      <div class="name">{{ item?.scenarioTag || '' }}</div>
                      <div class="describe">{{ item?.scenarioContent || '' }}</div>
                    </div>
                    <div class="image">
                      <img :src="item?.downloadImageUrl" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="service-version">
        <div class="top">
          <div class="title">版本列表</div>
        </div>
        <a-table
          :style="{ width: '100%' }"
          :pagination="false"
          :columns="tableColumns"
          :data-source="dataList"
          :custom-row="(r: any) => ({ onClick: () => previewRow(r) })"
          :loading="loading"
          class="header-right-angle admin-table"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'versionName'">
              <div class="version-icon">
                <p><i class="iconfont icon-file-line"></i></p>
                <p>{{ record.versionName || '' }}</p>
              </div>
            </template>
            <template v-else-if="column.dataIndex == 'status'">
              <a-tooltip v-if="record.status == 0 || record.status == 2 || record.status == 3" placement="bottom">
                <template #title>
                  <span>{{ statusList[record.status]?.name?.substring(1) }}时间 {{ record?.statusTime || '' }}</span>
                </template>
                {{ statusList[record.status]?.name || '' }}
              </a-tooltip>
              <span v-else>{{ statusList[record.status]?.name || '' }}</span>
            </template>
            <template v-else-if="column.dataIndex == 'tools' && detailData?.status != 0">
              <a-tooltip placement="bottom">
                <template #title>
                  <span>编辑版本</span>
                </template>
                <a-button
                  v-auth="'algo-version-edit'"
                  :disabled="record.status == 0"
                  type="link"
                  class="mr-16"
                  @click.stop="handleToVersionForm('edit', record)"
                >
                  <i class="iconfont icon-edit-line" style="font-size: 18px"></i>
                </a-button>
              </a-tooltip>
              <a-tooltip placement="bottom">
                <template #title>
                  <span>删除版本</span>
                </template>
                <a-button
                  v-auth="'algo-version-delete'"
                  :disabled="record.status == 0"
                  type="link"
                  @click.stop="handleOpenTimeModal(record)"
                  ><i class="iconfont icon-delete-bin-line" style="font-size: 18px"></i
                ></a-button>
              </a-tooltip>
            </template>
          </template>
        </a-table>
      </div>
    </template>
  </main-card-admin>
  <!-- 删除版本 -->
  <timer-modal
    v-model:open="timerModalVisible"
    title="确认删除"
    info="此版本删除后不可恢复，请确认操作！"
    date-label="请选择删除时间"
    ok-text="确认并发送通知"
    @ok="handleDeleteVersion"
  />
  <!-- 删除算法 -->
  <timer-modal
    v-model:open="gloTimerModalVisible"
    title="确认删除"
    info="此算法服务所有版本将被删除，且不可恢复，请确认操作！"
    date-label="请选择删除时间"
    ok-text="确认并发送通知"
    @ok="handleDeleteGlo"
  />
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import dayjs from 'dayjs'
  import { computed, onMounted, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute, useRouter } from 'vue-router'

  import { algoDepotApi } from '@/services/api'
  import { filterTableColumns } from '@/utils'

  import TimerModal from '../components/timer-modal.vue'
  import { statusList } from '../options'

  const route = useRoute()
  const router = useRouter()
  const { id } = route.params as any

  onMounted(() => {
    getDetailData(id)
  })

  // 面包削
  const crumbs = computed(() => {
    return [
      { path: '/admin/algo-service-manage/list', name: '算法仓库' },
      { name: `算法详情（${detailData?.value?.algorithmName || ''}）` }
    ]
  })
  const showOtherInfo = ref(false)
  const dataList = ref([])
  const title = computed(() => {
    return `算法详情（${detailData.value?.algorithmName || ''}）`
  })
  const tableColumns = computed(() => {
    const columns = filterTableColumns([
      {
        title: '版本号',
        dataIndex: 'versionName',
        width: 200
      },
      {
        title: '说明',
        dataIndex: 'versionDescribe'
      },
      {
        title: '更新时间',
        dataIndex: 'updateTime',
        width: 200,
        sorter: {
          compare: (a, b) => {
            return dayjs(a.updateTime).valueOf() - dayjs(b.updateTime).valueOf()
          }
        }
      },
      {
        title: '状态',
        dataIndex: 'status',
        width: 120
      },
      {
        title: '操作',
        width: 200,
        dataIndex: 'tools',
        align: 'right'
      }
    ])

    detailData?.value?.status === 0 && columns.splice(columns.length - 1, 1)
    return columns
  })

  // 获取详情数据
  const detailData = ref<any>(null)
  const { loading, runAsync: getDetailData } = useRequest<ResponseData<any>>(algoDepotApi.detail, {
    onSuccess: ({ data }) => {
      detailData.value = data
      dataList.value = data.algorithmVersionInfoVOS
    }
  })

  // 删除算法
  const gloTimerModalVisible = ref<boolean>(false)
  const handleOpenDeleteModal = () => {
    gloTimerModalVisible.value = true
  }
  const { runAsync: runDelete } = useRequest(algoDepotApi.delete, {
    onSuccess: () => {
      gloTimerModalVisible.value = false
      message.success('操作成功')
      router.go(-1)
    }
  })
  const handleDeleteGlo = (time: any) => {
    runDelete(detailData.value?.id, time)
  }

  // 删除版本
  const timerModalVisible = ref<boolean>(false)
  let _row_: any = null // 临时储存表格行信息
  const handleOpenTimeModal = (row: any) => {
    _row_ = row
    timerModalVisible.value = true
  }
  const { runAsync: runDeleteVersion } = useRequest(algoDepotApi.deleteVersion, {
    onSuccess: () => {
      getDetailData(id)
      message.success('操作成功')
    }
  })
  const handleDeleteVersion = (time: string) => {
    runDeleteVersion(_row_.id, time)
  }

  // 跳转算法表单
  const handleToGloForm = () => {
    router.push(`/admin/algo-service-manage/edit/${id}`)
  }

  // 跳转版本详情
  const previewRow = (row: any) => {
    router.push(`/admin/algo-service-manage/version-detail/${row.id}?detailId=${id}`)
  }

  // 跳转版本编辑OR新增
  const handleToVersionForm = (type: 'add' | 'edit', record: any) => {
    const url =
      type === 'add'
        ? `/admin/algo-service-manage/version-add?algorithmId=${id}&parent=算法详情`
        : `/admin/algo-service-manage/version-edit/${record?.id}?algorithmId=${id}&parent=算法详情`
    router.push(url)
  }
</script>

<style lang="less" scoped>
  // @import '@/styles/mixins.less';
  .version-icon {
    display: flex;
    gap: 0 5px;

    i {
      color: @primary-color;
    }
  }

  .tool-btn {
    display: flex;
    gap: 0 12px;

    > p {
      display: flex;
      align-items: center;
      gap: 0 5px;
      color: rgba(25, 25, 48, 0.45);
    }
  }

  .topTome {
    display: flex;
    justify-content: space-between;
    padding: 8px 24px;
    color: rgba(0, 0, 0, 0.45);
    background: rgba(245, 245, 245, 1);
    border-radius: 6px;
    .font12();

    .topTome-time {
      display: flex;
      align-items: center;
    }

    .timeBox {
      padding: 0 24px 0 0;

      &:first-child {
        border-right: 1px solid rgba(0, 0, 0, 0.12);
      }

      &:last-child {
        padding-left: 24px;
      }
    }

    .time {
      margin-left: 16px;
      color: rgba(0, 0, 0, 0.92);
    }

    .delete-icon {
      color: rgba(25, 25, 48, 0.2);
    }
  }

  .service-detail {
    .service-detail-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .service-detail-title-right {
        display: inline-flex;
        align-items: center;
        margin-top: 16px;
      }

      .pageTitle {
        .font18b();

        margin-top: 30px;
        margin-bottom: 18px;
        color: rgba(16, 16, 20, 0.95);
      }
    }

    .content {
      background: #fafafa;
      border-radius: 10px;

      .baseInfo {
        display: flex;
        gap: 0 100px;
        padding: 32px 40px 42px;

        .flexItem {
          &.left {
            width: 50%;
          }

          &.right {
            padding-left: 128px;
            width: 50%;

            .infoItem {
              align-items: flex-start;

              .value {
                white-space: pre-wrap;

                p {
                  transform: translateY(0);
                }
              }
            }
          }

          .infoItem {
            display: flex;
            align-items: center;
            margin-bottom: 36px;

            &:last-child {
              margin-bottom: 0;
            }

            .title {
              width: 120px;
              flex-shrink: 0;
            }

            .value {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: break-all;
              word-wrap: break-word;
              line-height: 1.2;

              p {
                line-height: 22px;
                transform: translateY(-4px);
              }

              .link {
                color: #649af0;
              }

              .previewImg {
                width: 120px;
                height: 120px;
                background: #fff;
                border: 1px solid rgba(0, 0, 0, 0.18);
                border-radius: 2px;
              }
            }

            .tagList {
              display: flex;
              width: 100%;
              gap: 0 16px;

              .tag {
                overflow: hidden;
                padding: 3px 6px;
                line-height: 22px;
                text-overflow: ellipsis;
                white-space: nowrap;
                border: 1px solid rgba(0, 0, 0, 0.05);
                border-radius: 6px;

                &.typeTag {
                  color: #4686ed;
                  background: rgba(65, 84, 209, 0.08);
                }

                &.personalizedTag {
                  color: #d61860;
                  background: rgba(214, 24, 96, 0.08);
                }
              }
            }
          }
        }
      }

      .otherInfo {
        .content {
          padding: 0 40px 40px;
          width: 100%;

          .content-box {
            display: flex;
            margin-bottom: 36px;

            .title {
              width: 120px;
              flex-shrink: 0;
            }

            .content-box-info {
              flex: 1;
              display: flex;
              flex-wrap: wrap;
              gap: 36px 16px;

              .content-box-info-list {
                padding-left: 16px;
                min-width: 45%;
                flex: 1;
                border-left: 4px solid @primary1;

                .name {
                  margin-bottom: 8px;
                  font-size: 16px;
                  color: rgba(16, 16, 20, 0.95);
                  font-weight: 700;
                  line-height: 24px;
                }

                .describe {
                  font-weight: 400;
                  font-size: 14px;
                  line-height: 22px;
                  color: rgba(16, 16, 20, 0.95);
                  word-break: break-all;
                }

                .image {
                  img {
                    margin-top: 8px;
                    width: 168px;
                    height: 115px;
                  }
                }
              }

              .flex-space-between {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              }
            }
          }

          .content-box:last-child {
            margin-bottom: 0;
          }
        }

        .introduce {
          display: flex;
          align-items: center;
          padding: 0 16px 36px;
          width: 100%;
          width: auto;
          white-space: nowrap;
          color: rgba(25, 25, 48, 0.75);
          cursor: pointer;

          &.show {
            top: auto;
            bottom: 16px !important;
          }

          .line {
            width: 100%;
            height: 1px;
            background-color: rgba(0, 0, 0, 0.07);
          }

          .showDownBtn {
            flex-shrink: 0;
            display: inline-block;
            margin-right: 12px;
            width: 26px;
            height: 26px;
            font-size: 18px;
            text-align: center;
            background-color: #fff;
            border: 1px solid #d9d9db;
            border-radius: 13px;
            line-height: 26px;
          }
        }
      }
    }
  }

  .service-version {
    padding-bottom: 40px;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 60px 0 32px;

      .title {
        height: 26px;
        font-size: 18px;
        color: rgba(16, 16, 20, 0.95);
        font-weight: 700;
        line-height: 26px;
      }
    }
  }
</style>
./options @/types
